﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/ViewMasterPage1.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	AddNewLine
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <br />
    <h2>Add New Line</h2>

   <% using (Html.BeginForm("SaveNewLine", "Home"))
   { %>
    <br />
    <br />
    Line Number: <input type="text" style="width:80px" name="LineNumber" />
    &nbsp;&nbsp;&nbsp;&nbsp;
    Type:<%-- <%=Html.DropDownList("CategoryId", (SelectList)ViewData["VTypesForSelect"], new { style = "width:50px;" })%>   --%>
  
        
        <%=Html.DropDownList("CategoryId",  new[]
        { 
            new SelectListItem { Text="V", Value="V" },
            new SelectListItem { Text = "M", Value = "M" }, 
            new SelectListItem { Text = "B", Value = "B" },
            new SelectListItem { Text = "T", Value = "T" } 
        } , new { style = "width:50px;" })%> 

    <br />
    <br />
    <input id="Button1" type="button" value="Add Station" onclick="addBtnClick();" />

    <br />
    <br />
    <br />

    <p> <span style="width:350px; float: left" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Name </span><span style="width:80px ; float: left"> Latitude </span><span style="width:80px; float: left">Longitude </span>   </p>
         
    <br />
    <br />
    <div id="Items"></div>

    <br />
    <br />
    <br />
    <input id="Button2"  type="submit" class="btn primary" style=" margin-left: 450px;" value="Save" />
    
    <br />

    <% if (ViewData["AddLineMsg"] != null)
        { %>
        <br />
        <p style='color:Red'>
        <br />
         <%=  (string)ViewData["AddLineMsg"] %>
         </p>
     <%} %>          
   <% } %>   
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="HeaderContent" runat="server">
    <script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
      <script src="../../Scripts/jquery-ui-1.8.17.custom.min.js" type="text/javascript"></script>

    
  <script type="text/javascript">
      var i = 0;
      var listOfStations;

      $(document).ready(function () {

          $.ajax({
              type: "POST",
              url: '../../InfoService.svc/InfoService/GetAllStations',
              contentType: "application/json",
              data: null,
              success: function (data) {
                  listOfStations = data.d;

                  $('input[name="input0"]').autocomplete({
                      source: listOfStations
                  });
              }
          });


          addBtnClick();
      });


   
      
      function addBtnClick() {
          var stname = 'input' + i.toString();
          var latitude = 'latitude' + i.toString();
          var longitude = 'longitude' + i.toString();

          var removeBtn
          if (i == 0) {
              removeBtn = '';
          } else {
              removeBtn = '<input id="removeBtn" class="btn danger" type="button" value="-" onclick="removeBtnClicked();" />';
          }

          $('#removeBtn').remove();

          var inputField = '<input type="text" style="width:300px" name="' + stname + '" />';
          var latitudeField = '<input type="text" style="width:80px" name="' + latitude + '" />';
          var longitudeField = '<input type="text" style="width:80px" name="' + longitude + '" />';

          $('<p id=pid'+i.toString()+ '>' + (i).toString() + " " + inputField + " " + latitudeField + " " + longitudeField + " " + removeBtn + '</p>').appendTo('#Items').hide().fadeIn('slow');

          if (i != 0) {
              $('input[name="' + stname + '"]').autocomplete({
                  source: listOfStations
              });
          }


          $('input[name=' + stname + ']').bind('autocompleteselect', function (event, ui) {

              var currentId = $(this).parent().attr('id');

              var actelement = $(this);
             
              var sbane = $(this).val();

              $.ajax({
                  type: "POST",
                  url: '../../InfoService.svc/InfoService/GetPositionOfStation',
                  contentType: "application/json",
                  data: JSON.stringify({ StationName: ui.item.value }),
                  success: function (data) {

                      var lat = actelement.parent().find('input[name^="latit"]');
                      var lon = actelement.parent().find('input[name^="longi"]');


                      if (data.d != null) {
                          lat.val(data.d.Latitude);
                          lon.val(data.d.Longitude);

                      }

                  }
              });
          });

          $('input[name=' + stname + ']').keydown(function () {

              var currentId = $(this).parent().attr('id');

              var actelement = $(this);

              var sbane = $(this).val();

              $.ajax({
                  type: "POST",
                  url: '../../InfoService.svc/InfoService/GetPositionOfStation',
                  contentType: "application/json",
                  data: JSON.stringify({ StationName: sbane }),
                  success: function (data) {

                      var lat = actelement.parent().find('input[name^="latit"]');
                      var lon = actelement.parent().find('input[name^="longi"]');


                      if (data.d != null) {
                          lat.val(data.d.Latitude);
                          lon.val(data.d.Longitude);

                      }

                  }
              });
          });
          
          

          i++;
      }    

      function removeBtnClicked() {
          i--;
          $('#pid' + i.toString()).remove();

          if (i > 1){
              $('#pid' + (i - 1).toString()).append('<input id="removeBtn" class="btn danger"  type="button" value="-" onclick="removeBtnClicked();" />');
          }
      }
  </script>
</asp:Content>
